<template>
  <v-card>
    <v-card-title primary-title>
      <v-btn color="info">Info</v-btn>
      <v-spacer></v-spacer>
      <v-text-field
        v-model="search"
        append-icon="search"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>

    <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :total-items="totalDesserts"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td>{{ props.item.id }}</td>
        <td class="text-xs-right">{{ props.item.name }}</td>
        <td class="text-xs-right">
          <img v-if="props.item.image" :src="props.item.image"></img>
          <span v-else>无</span>
        </td>
        <td class="text-xs-right">{{ props.item.letter }}</td>
        <td class="justify-center layout px-0">
          <v-icon
            small
            class="mt-3"
            @click="editItem(props.item)"
          >
            edit
          </v-icon>
          <v-icon
            small
            class="mt-3"
            @click="deleteItem(props.item)"
          >
            delete
          </v-icon>
        </td>
      </template>
    </v-data-table>
  </v-card>
</template>

<script>
  import {brandData} from "../../mockDB";
    export default {
      name: "MyBrand",
      search: "",
      data(){
          return {
            brands: brandData,
            headers: [
              {
                text: 'id',
                align: 'center',
                value: 'id'
              },
              { text: '品牌名称', value: 'name', sortable: false },
              { text: 'LOGO', value: 'image', sortable: false },
              { text: '首字母', value: 'letter' },
              { text: '操作', value: 'id', sortable: false }
            ]

          }
      }
    }
</script>

<style scoped>

</style>
